<template>
	<view class="classList">
		<view class="loadingLayout" v-if="!classList.length && noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<view class="content">
			<navigator v-for="item in classList" class="item" :key="item._id">
				<image class="pic" :src="item.smallPicurl" mode="aspectFit"></image>
			</navigator>
		</view>
		
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		apiGetClassList,
		apiGetHistoryList
	} from "@/api/apis.js"


	const classList = ref([])
	let pageName
	const noData = ref(false)

	// 分页查询逻辑
	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}

	onLoad(async (e) => {
		console.log('e:', e)
		let {
			id = null, name = null, type = null
		} = e

		if (type) queryParams.type = type
		if (id) queryParams.classid = id

		pageName = e.name

		uni.setNavigationBarTitle({
			title: name
		})

		await getClassList()
	})
	
	onReachBottom(() => {
		if (noData.value) return
		queryParams.pageNum++
		getClassList()
	})
	
	async function getClassList() {
		let res1;
		let res2;
		if (queryParams.classid) res1 = await apiGetClassList(queryParams)
		if (queryParams.type) res2 = await apiGetHistoryList(queryParams)
		classList.value = [...classList.value, ...res1.data, ...(res2 ? res2.data : [])]
		if (queryParams.pageSize > res1.data.length) noData.value = true
		uni.setStorageSync("storeClassList", classList.value)
	}
	onUnload(() => {
		uni.removeStorageSync('storeClassList')
	})
</script>

<style lang="scss" scoped>
	.classList {
		.header {
			display: flex;
			justify-content: center;
			font-size: 38rpx;
			font-weight: 500;
		}

		.content {
			gap: 5rpx;
			padding: 5rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.item {
				height: 440rpx;

				.pic {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>